<template>
  <div>
    <div class="header1">header</div>
    <div class="content1">
      <div class="left" ref="left">
        <ul>
          <li
            v-for="(item, index) in left"
            :key="index"
            :class="{ active: currentIndex == index }"
            @click="selectItem(index, $event)"
          >
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>
      <div class="right" ref="right">
        <ul ref="cont">
          <li
            v-for="(item, index) in right"
            :key="index"
            class="right_item"
            ref="contli"
          >          
            <h2>{{ item.name }}</h2>
            <div class="lists">
              
                <p v-for="(k,i) in item.data" :key="i">
                <router-link
                 :to="{path:'/singerlist',query:{id:k.id,picUrl:k.picUrl}}" 
                 class="ovf" 
                >
                <img :src="k.picUrl" alt="" />
                {{ k.name }}
                </router-link>
                </p>
              
            </div>
          
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "@better-scroll/core";
export default {
  props: {
    left: {
      default: function () {
        return ["按钮1", "按钮2", "按钮3"];
      },
    },
    right: {
      default: function () {
        return [
          {
            name: "内容1",
            data: [1, 2, 3, 4, 5, 6],
          },
          {
            name: "内容2",
            data: [1, 2, 3, 4, 5, 6],
          },
          {
            name: "内容3",
            data: [1, 2, 3, 4, 5, 6],
          },
        ];
      },
    },
  },

  data() {
    return {
      listsHeight: [],
      scrollY: "",
    };
  },
  methods: {
    test(data){
      console.log("点击跳转");
      console.log(data);
    },
    _initScroll() {
        // this.reset();
    //   console.log(this.$refs.left);
      this.lefts = new BScroll(this.$refs.left, {
        click: true,
        probeType: 3,
      });
    //   console.log(this.lefts);
      this.rights = new BScroll(this.$refs.right, {
        click: true,
        probeType: 3,
      });
      //获取滚动高度
      this.rights.on("scroll", (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
        // console.log(this.scrollY);
      });
    },
    _getHeight() {
      let rightItems = this.$refs.right.getElementsByClassName("right_item");
      console.log(rightItems);
      console.log(rightItems[0]);
      let height = 0;
      this.listsHeight.push(height);
      console.log("rightItems=>"+rightItems.length);
      for (let i = 0; i < rightItems.length; i++) {
        let item = rightItems[i];
        console.log(item.clientHeight);
        height += item.clientHeight;
        this.listsHeight.push(height);
      }
      console.log(this.listsHeight);
    },
    selectItem(index, event) {
      if (!event._constructed) {
        return;
      } else {
        let rightItems = this.$refs.right.getElementsByClassName("right_item");
        let el = rightItems[index];
        // console.log(el);
        this.rights.scrollToElement(el, 300); //插件内置方法
      }
      // this.currentIndex = index;
    },
    reset(){
        
        
            // console.log(this.$refs.contli);
            //  let height = this.right.length * this.$refs.contli[0].offsetHeight;
            this.$refs.cont.style.height = 4304 + "px"; // 修改滚动区域的宽度
            // console.log( this.$refs.cont.style.height);

    }
  },
  updated() {
      // this.reset();
  },
  created() {
    
  },
  mounted() {
      // this.reset();
    this.$nextTick(() => {
            this.reset();
      this._initScroll();
      this._getHeight();
      console.log(this.currentIndex);
    //   setTimeout(() => {
    //       console.log(this.$refs);
    //       setTimeout(() => {
    //           this.reset();
    //       }, 1000);
    //   }, 3000);
    });
  },
  
  computed: {
    currentIndex() {
      // console.log(this.listsHeight);       
      for (let i = 0; i < this.listsHeight.length; i++) {
        let height = this.listsHeight[i];
        let height2 = this.listsHeight[i + 1];
        if (!height2 || (this.scrollY >= height && this.scrollY < height2)) {
          let leftItems = this.$refs.left.getElementsByTagName("li");
          this.lefts.scrollToElement(leftItems[i], 200);
          // console.log(i);
          return i;
        }
      }
      return 0;
    },
  },
};
</script>
<style lang="less">
ol,
ul {
  list-style: none;
}
.ovf{
overflow: hidden;
}
#app {
  width: 100%;
  height: 100%;
}
.header1 {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /* position: fixed; */
  background-color: red;
}
.content1 {
  position: absolute;
  // position: relative;
  display: flex;
  // flex-direction: row;
  top: 80px;
  bottom: 0px;
  width: 100%;
  /* height: calc(100%-30px); */
  /* height: 100%; */
  overflow: hidden;
  .left {
    /* flex: 30%; */
    /* height: 100%; */
    // width: 100px;
    // background-color: aqua;
    // display: none;
    position: absolute;
    top: 30px;
    right: 10px;
    z-index: 999;
  }
  .right {
    flex: 1;
    // height: 1000px;
    background-color: white;
    ul {
      // height: 10000px;
    //   height: 300px;
    }
    .lists {
      // display: flex;
      // flex-wrap: wrap;
      background-color: #f2f3f4;
      z-index: -1;
    }
  }
}

.left > ul li {
  /* background-color: gray; */
  /* height: 30px; */
  /* line-height: 30px; */
  // padding: 3px 0 ;
  text-align: center;
  font-size: 10px;
  margin-bottom: 3px;
  // width: 10px;
}
/* .left>ul li:hover{
            background-color: gray;
        } */
.right h2 {
  // text-align: center;
  height: 18px;
  width: 100%;
  line-height: 18px;
  text-indent: 10px;
  background-color: #dadbdc;
  color: white;
  font-size: 10px;
}
// .right li{
//     // height: 700px;
// }

.right p {
  // flex: 0 0 33.33%;
  margin: 0 5px;
  border-bottom: 1px solid #e4e5e5;
  height: 64px;
  line-height: 64px;
  // text-align: center;
  a{
    display: block;
  }
  img {
    width: 45px;
    height: 45px;
    margin-top: 4px;
    margin-right: 18px;
    display: inline-block;
    vertical-align: middle;
  }
}
.left .active {
  // background-color: gray;
  color: red;
}
</style>